<template>
  <div>
    <div class="shopcart">
      <div class="content">
        <div class="content-left" @click="showCartList">
          <div class="logo-wrapper">
            <div class="logo" :class="{ highlight: totalCount}">
              <i class="iconfont icon-shopping_cart highlight"></i>
            </div>
            <div class="num" v-show="totalCount">{{ totalCount }}</div>
          </div>
          <div class="price highlight">￥{{ totalPrices }}</div>
          <div class="desc">另需配送费￥{{ info.deliveryPrice }}元</div>
        </div>
        <div class="content-right">
          <div class="pay" :class="deliveryClass">{{deliveryText}}</div>
        </div>
      </div>

      <transition name="shop-cart">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="clearCart">清空</span>
            <!-- <mt-button type="default" style="float: right" @click.native="clearCart">清空</mt-button> -->
          </div>
          <div class="list-content" ref="foods">
            <ul>
              <li class="food" v-for="(food, index) in cart" :key="index">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cart-control :food="food" />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="fade">
      <div class="list-mask" v-show="listShow" @click="showCartList"></div>
    </transition>
  </div>
</template>
 
<script>
import { mapGetters, mapState } from "vuex";
import CartControl from "../CartControl/CartControl";
import BScroll from "better-scroll";

export default {
  data() {
    return {
      listShowToggle: false
    };
  },
  computed: {
    ...mapGetters(["totalCount", "totalPrices"]),
    ...mapState(["info", "cart"]),
    deliveryClass() {
      return this.totalPrices >= this.info.minPrice ? "enough" : "not-enough";
    },
    deliveryText() {
      const { totalPrices } = this;
      const { minPrice } = this.info;
      if (totalPrices == 0) {
        return `满${minPrice}起送`;
      } else if (totalPrices >= minPrice) {
        return `提交`;
      } else {
        return `还差${minPrice - totalPrices}原起送`;
      }
    },
    listShow() {
      if (this.totalCount == 0) {
        this.listShowToggle = false;
      }
      return this.listShowToggle && this.totalCount;
    }
  },
  methods: {
    showCartList() {
      if (this.totalCount) {
        this.listShowToggle = !this.listShowToggle;
      }

      if (this.listShowToggle) {
        this.$nextTick(() => {
          // 利用单例模式，只创建一次better-scroll 对象
          if (!this.bScroll) {
            this.bScroll = new BScroll(".list-content", {
              click: true
            });
          } else {
            this.bScroll.refresh();
          }
        });
      }
    },
    clearCart() {
      this.$store.dispatch("clearCart");
    }
  },
  components: {
    CartControl
  }
};
</script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 @import '../../common/stylus/minxins.styl';

 .shopcart {
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 50;
   width: 100%;
   height: 48px;

   .content {
     display: flex;
     background: #141d27;
     font-size: 0;
     color: rgba(255, 255, 255, 0.4);

     .content-left {
       flex: 1;

       .logo-wrapper {
         display: inline-block;
         vertical-align: top;
         position: relative;
         top: -10px;
         margin: 0 12px;
         padding: 6px;
         width: 56px;
         height: 56px;
         box-sizing: border-box;
         border-radius: 50%;
         background: #141d27;

         .logo {
           width: 100%;
           height: 100%;
           border-radius: 50%;
           text-align: center;
           background: #2b343c;

           &.highlight {
             background: $green;
           }

           .icon-shopping_cart {
             line-height: 44px;
             font-size: 24px;
             color: #80858a;

             &.highlight {
               color: #fff;
             }
           }
         }

         .num {
           position: absolute;
           top: 0;
           right: 0;
           width: 24px;
           height: 16px;
           line-height: 16px;
           text-align: center;
           border-radius: 16px;
           font-size: 9px;
           font-weight: 700;
           color: #ffffff;
           background: rgb(240, 20, 20);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
         }
       }

       .price {
         display: inline-block;
         vertical-align: top;
         margin-top: 5px;
         line-height: 24px;
         padding-right: 12px;
         box-sizing: border-box;
         font-size: 16px;
         font-weight: 700;
         color: #fff;

         &.highlight {
           color: #fff;
         }
       }

       .desc {
         display: inline-block;
         vertical-align: bottom;
         margin-bottom: 15px;
         margin-left: -45px;
         font-size: 10px;
       }
     }

     .content-right {
       flex: 0 0 105px;
       width: 105px;

       .pay {
         height: 48px;
         line-height: 48px;
         text-align: center;
         font-size: 12px;
         font-weight: 700;
         color: #fff;

         &.not-enough {
           background: #2b333b;
         }

         &.enough {
           background: #00b43c;
           color: #fff;
         }
       }
     }
   }

   .ball-container {
     .ball {
       position: fixed;
       left: 32px;
       bottom: 22px;
       z-index: 200;
       transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);

       .inner {
         width: 16px;
         height: 16px;
         border-radius: 50%;
         background: $green;
         transition: all 0.4s linear;
       }
     }
   }

   .shopcart-list {
     position: absolute;
     left: 0;
     top: 0;
     z-index: -1;
     width: 100%;
     transform: translateY(-100%);

     &.shop-cart-enter-active, &.shop-cart-leave-active {
       transition: all .5s;
     }
     &.shop-cart-enter, &.shop-cart-leave-to{
       transform: translateY(0);
       opacity: 0;
     }

     .list-header {
       height: 40px;
       line-height: 40px;
       padding: 0 18px;
       background: #f3f5f7;
       border-bottom: 1px solid rgba(7, 17, 27, 0.1);

       .title {
         float: left;
         font-size: 14px;
         color: rgb(7, 17, 27);
       }

       .empty {
         float: right;
         font-size: 12px;
         color: rgb(0, 160, 220);
       }
     }

     .list-content {
       padding: 0 18px;
       max-height: 217px;
       overflow: hidden;
       background: #fff;

       .food {
         position: relative;
         padding: 12px 0;
         box-sizing: border-box;
         bottom-border-1px(rgba(7, 17, 27, 0.1));

         .name {
           line-height: 24px;
           font-size: 14px;
           color: rgb(7, 17, 27);
         }

         .price {
           position: absolute;
           right: 90px;
           bottom: 12px;
           line-height: 24px;
           font-size: 14px;
           font-weight: 700;
           color: rgb(240, 20, 20);
         }

         .cartcontrol-wrapper {
           position: absolute;
           right: 0;
           bottom: 6px;
         }
       }
     }
   }
 }

 .list-mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 40;
   backdrop-filter: blur(10px);
   opacity: 1;
   background: rgba(7, 17, 27, 0.6);

   &.fade-enter-active, &.fade-leave-active {
     transition: all 0.5s;
   }

   &.fade-enter, &.fade-leave-to {
     opacity: 0;
   }
 }
</style>
